<template>
  <div class="pagination-block">
    <el-pagination
        v-model:current-page="pageProps.page"
        v-model:page-size="pageProps.limit"
        :page-sizes="defaultPageSizes"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
const pageProps = defineModel();
const props = defineProps({
  fetchDataFun: {
    type: Function,
    default: () => {
    }
  },
  total: {
    type: Number,
    default: 0
  },
  layout: {
    type: String,
    default: ''
  },
  defaultPageSizes: {
    type: Array,
    default: [8, 16, 24, 32]
  }
})
const handleSizeChange = () => {
  props.fetchDataFun();
}
const handleCurrentChange = () => {
  props.fetchDataFun();
}
</script>
<style>
.pagination-block{
  margin-top: 20px;
}
</style>